<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<div id="direction"></div>
		</br>
		<div id="motion"></div>
	</body>
	<script type="text/javascript">
		window.addEventListener('deviceorientation',function(evt){
			direction.innerText = `absolute:${evt.absolute},
								 	 alpha:${evt.alpha},
								 	 beta:${evt.beta},
								 	 gamma:${evt.gamma}`
		},true)
		window.addEventListener('devicemotion',function(evt){
		
			motion.innerText = ` interval:${evt.interval},
								 accelerationIncludingGravity-x:${evt.accelerationIncludingGravity.x},
								 accelerationIncludingGravity-y:${evt.accelerationIncludingGravity.y},
								 accelerationIncludingGravity-z:${evt.accelerationIncludingGravity.z},
								 rotationRate-alpha:${evt.rotationRate.alpha},
								 rotationRate-beta:${evt.rotationRate.beta},
								 rotationRate-gamma:${evt.rotationRate.gamma}`
		},true)
	</script>
</html>
